<template>
  <el-aside width="200px">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :default-openeds="['1-1']"
    >
      <el-submenu index="1-1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu
          v-for="item in routers"
          :key="item.path"
          :default-active="$route.path"
        >
          <el-menu-item
            v-if="item.meta && getActive == 'conf-center'"
            :index="item.path"
            @click="jumpto(item.path)"
            ><span slot="title">{{ item.meta.title }}</span></el-menu-item
          >
        </el-menu>
      </el-submenu>
    </el-menu>
    <!-- 循环路由   	        绑定 key 值	     只高亮当前点击的标题 -->
    <!-- <el-menu
      v-for="item in routers"
      :key="item.path"
      :default-active="$route.path"
    >
      如果有路由并且路由地址中有 conf-center 
      传递对应路由 
      点击传递当前路由信息 
      <el-menu-item
        v-if="item.meta && getActive == 'conf-center'"
        :index="item.path"
        @click="jumpto(item.path)"
      >
         展示当前路由信息 
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu> -->
  </el-aside>
</template>
<script>
import { jumpto } from "@/utils/index";
export default {
  data() {
    return {
      jumpto,
      isCollapse: true,
    };
  },
  computed: {
    auth() {
      return this.$store.state.auth;
    },
    getActive() {
      //  获取当前的路径上 / 分割后下标为1的字符串
      return this.$route.path.split("/")[1];
    },
    routers() {
      // 获取路由的数组
      return this.$router.options.routes;
    },
  },
  mounted() {
    // let that = this;
    // 延时函数 延时打印路由
    // setTimeout(() => {
    //     console.log(that.routers);
    // }, 2000);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped>
@import "/assets/styles/reset";
</style>
